<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>微信提现</title>
    <style>
        .layui-m-layercont{
            padding: 30px!important;
        }
        .layui-m-layerbtn span[yes]{
            color: #8bc34a!important;
        }
        .layui-m-layerbtn{
            height: 2rem!important;
            line-height:2rem!important;
            font-size: 0.6rem!important;
            background-color:#fff!important;
        }
        .layui-m-layer-msg .layui-m-layercont{
            padding: 10px 20px!important;
        }
        body .layui-m-layer .layui-m-layer-msg{
            bottom: initial!important;
        }
    </style>
</head>
<body class="whiteBg">
<div class="clearfix">
    <div class="daohanglan_box">
        <div class="title">
            <i class="icon iconfont icon-iconfontjiantou1"></i>
            <h4>微信提现</h4>
        </div>
    </div><!--头部-->

        <div class="head_box3 clearfix">
            <div class="headbox_ban fl">
                <div class=" clearfix">
                    <img class="yinhangkakahao fl" src="images/yinghangkakahao.png" />
                    <span class="fl kahao">卡号&nbsp&nbsp&nbsp<span style="color:#515151;font-size:0.5rem">001936272</span></span>
                </div>
                <div class="jianj clearfix">
                    <img class="yinghangkaxingm fl" src="images/yinghangkaxingming.png" />
                    <span class="fl kahao">姓名&nbsp&nbsp&nbsp<span style="color:#515151;font-size:0.5rem">周某人</span></span>
                </div>
            </div>
            <div class="zhongjian_xian fl"></div>
            <div class="headbox_ban2 fl">
                <p class="integral">2606</p>
                <p style="font-size:0.45rem;">可用蓝积分</p>
            </div>
            <a href="提现记录.html" class="tixianann">提现记录</a>
        </div>
    <div class="tixian_box">
        <img class="tixian_img" src="images/ka.png" />
        &nbsp 提现记录
    </div>
</div><!--个人信息-->
<table border="1" class="danyuange">
    <tr>
        <td>
            <p class="money"><span>50</span>元</p>
            <p>500蓝积分</p>
        </td>
        <td>
            <p class="money"><span>100</span>元</p>
            <p>1000蓝积分</p>
        </td>
        <td>
            <p class="money"><span>150</span>元</p>
            <p>1500蓝积分</p>
        </td>
    </tr>

    <tr>
        <td>
            <p class="money"><span>200</span>元</p>
            <p>2000蓝积分</p>
        </td>
        <td>
            <p class="money"><span>500</span>元</p>
            <p>5000蓝积分</p>
        </td>
        <td>
            <p class="money"><span>1000</span>元</p>
            <p>10000蓝积分</p>
        </td>
    </tr>
</table><!--积分提现-->
<div class="diy">
    自定义金额
</div>
<div class="clearfix">
    <img class="diy_jiner fl" src="images/qian.png" />
    <input class="diy_jiner_zi fl" type="text" placeholder="请输入提现金额">
</div>
<div class="clearfix">
    <div class="shoujihao_box fl">手机号</div>
    <input class="shoujihao_k fl" type="text" placeholder="请输入预留手机号">
</div>

<div class="clearfix">
    <div class="shoujihao_box1 fl">验证码</div>
    <input class="shoujihao_k1 fl" type="text" placeholder="请输入验证码">
    <div class="shoujihao_k2 fl">获取验证码</div>
</div>

<div class="ann">下一步</div>

<div class="dibu_box4">
    <div class="left2">
        <div class="dibu_box4_zi">谨慎操作，提交后不可更改</div>
        <div class="dibu_box4_zi2">说明：</div>
        <div class="dibu_box4_zi3">本服务可将您账户中的“蓝积分”折算为人民币转入您微信钱包账户中，实现积分的提现，为了您能正常并成功提现，请您注意以下事项：</div>
        <div class="dibu_box4_zi3">1.提现申请提交后，您账户相应数量“蓝积分”将被冻结，无法在垃圾分类活动现场使用，未提现“蓝积分”数量可继续进行现场兑换。</div>
        <div class="dibu_box4_zi3">2.提现过程中需提供办理积分卡时的预留手机号，若忘记或变更，请前往积分卡办理点（小区厨余垃圾回收及可回收垃圾回收活动人员）办理预留手机号变更服务。</div>
        <div class="dibu_box4_zi3">3.本体现服务仅可提现“蓝积分”，“绿积分”无法体现。</div>
    </div>
</div>
<script src="js/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
<script>
    var money = 0;
    var zhi = "";
    $(function(){
        $(".danyuange").on("click","td", function(){
            $(this).addClass("act").siblings().removeClass("act");
            $(this).parent().siblings().find("td").removeClass("act");
            if($(this).hasClass("act")){
                money = $(this).find(".money span").text();
                $(".diy_jiner_zi").val(money);
            }
            zhi = $(".diy_jiner_zi").val();
            zhiNuB();

        });
        //判断input是否有值
        $('.diy_jiner_zi').bind('input propertychange', function() {
            zhi = $(this).val();
            zhiNuB();
            $(".danyuange td p.money span").each(function(){
                var m =  $(this).text();
                if(zhi == m){
                    $(".danyuange td").removeClass("act");
                    $(this).parent().parent().addClass("act")
                }else{
                    $(this).parent().parent().removeClass("act");
                }
            });
            if(zhi == ""){
                $(".danyuange td").removeClass("act")
            }
        });
        //进行下一步
        $("body").on("click",".ann.green",function(){
            var v = $(".diy_jiner_zi").val();
            var t = $(".shoujihao_k").val();
            var c = $(".shoujihao_k1").val();
            var integral = $(".integral").text()/10;
            if(v == ""){
                error('提现金额不能为空');
            } else if(t == ""){
                error('手机号码不能为空');
            } else if(!t.match(/^1[3|4|5|7|8]\d{9}$/)){
                error('请输入正确的手机号');
            } else if(c == ""){
                error('验证码不能为空');
            }else if(v <= integral){
                layer.open({
                    shadeClose: false,
                    content: '\<\div id="nextBtn">' +
                    '<p>你的提现金额为 <span>50</span> 元整</p>' +
                    '<p>将扣除 <span>500</span> 蓝积分</p>' +
                    '<p>请谨慎核对，提交后不可更改！</p>'+
                    '\<\/div>'
                    ,btn: ['确认', '取消']
                    ,yes: function(index){
                        layer.close(index);
                        window.location.href = "提现状态.html";
                    }
                });
            }else {
                layer.open({
                    content: '积分不足，请重新输入'
                    ,skin: 'msg'
                    ,time: 2 //2秒后自动关闭
                });
            }
        });
        /*验证码倒计时*/
        $(".shoujihao_k2").on("click",function(){
            if(!$(".shoujihao_k").val().match(/^1[3|4|5|7|8]\d{9}$/)){
                error('请输入正确的手机号');
                return false;

            }else{
                var wait = 10;
                error('验证码已发送');
                time(wait, $('.shoujihao_k2'));
                $('.shoujihao_k2').unbind('click');
            }
        });
    });
    function zhiNuB(){
        //判断input是否有值
        if(zhi!=""){
            $(".ann").addClass("green");
        }else{
            $(".ann").removeClass("green");
        }
    };
    /*发送验证码倒计时*/
    function time(wait, o) {
        if (wait == 0) {
            o.removeAttr("disabled");
            o.html("获取验证码");
            wait = 10;
            $('.code_button').on('click', function() {
                time(wait, $('.shoujihao_k2'));
                $('.shoujihao_k2').unbind('click');
            });
        } else {
            o.attr("disabled", true);
            o.html("等待" + wait + "秒");
            wait--;
            setTimeout(function() {
                        time(wait, o);
                    },
                    1000)
        }
    }
</script>
</body>
</html>